<template>
    <div id='system-user'>
        <!-- <h1 class="card-title">
            <p><span>产品配置管理</span></p>
        </h1> -->
        <div class="loading-min-height">
            <div class='detail-info'>
                

                <!-- 支持的借款周期 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>支持的借款周期</span>
                        <span @click='addCycles' class="button auto transparent tar posi">新增借款周期</span>
                        <span @click='showEditCycles' class="button auto transparent tar">配置支持的借款周期</span>
                    </div>
                    <loading v-show='loading_cycles'></loading>
                    <p class='no-data' v-if='!loading_cycles && !cycles.length'>暂无数据</p>
                    <ul class="tag-list" v-if='!loading_cycles && cycles.length'>
                        <li class="tag__item" v-for='item in cycles' v-if='item.status === 1'>{{item.days}}天</li>
                    </ul>
                </div>

               <!-- 支持的借款金额 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>支持的借款金额</span>
                        <span @click='addCyclesPrice' class="button auto transparent tar posi">新增借款金额</span>
                        <span @click='showEditCyclesPrice' class="button auto transparent tar">配置支持的借款金额</span>
                    </div>
                    <loading v-show='loading_cyclesPrice'></loading>
                    <p class='no-data' v-if='!loading_cyclesPrice && !cyclesPrice.length'>暂无数据</p>
                    <ul class="tag-list" v-if='!loading_cyclesPrice && cyclesPrice.length'>
                        <li class="tag__item" v-for='item in cyclesPrice' v-if='item.status === 1'>{{item.amount/100}}.00元</li>
                    </ul>
                </div>

                

                
            </div>
        </div>

        <modal 
            title='新增借款周期'
            :show='show_modal_add' 
            :loading='loading_save_add' 
            confirm-text='保存'
            @close='closeEditModelsadd'
            @confirm='saveModeladd'>
            <div class="modal-form-wrap">
                <div class="item">
                <span class="mar">借款周期（天）:</span>
                <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
                <div class="form-item__value" style="margin-top:20px;">
                            <radio-group v-model='timeS'>
                                <radio :value='1'>支持</radio>
                                <radio :value='0'>不支持</radio>
                            </radio-group>
                        </div>
            </div>
            </div>
        </modal>

        <modal 
            title='配置支持的借款周期'
            :show='show_modal_cycle' 
            :loading='loading_save_cycles' 
            confirm-text='保存'
            @close='closeEditCycles'
            @confirm='saveCycle'>
            <div class="modal-form-wrap">
                <ul class='modal-form' v-if='cycles.length'>
                    <li class='form-item' v-for='item in cycles'>
                        <span class="form-item__key">{{item.days}}天</span>
                        <div class="form-item__value" >
                            <radio-group v-model='item.status'>
                                <radio :value='1'>支持</radio>
                                <radio :value='0'>不支持</radio>
                            </radio-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>
        
        <modal 
            title='新增借款金额'
            :show='show_modal_add_price' 
            :loading='loading_save_add_price' 
            confirm-text='保存'
            @close='closeEditModelsaddPrice'
            @confirm='saveModeladdPrice'>
            <div class="modal-form-wrap">
                <div class="item">
                <span class="mar">借款金额（元）:</span>
                <el-input v-model="inputPrice" placeholder="请输入借款金额" clearable></el-input>
                <div class="form-item__value" style="margin-top:20px;">
                            <radio-group v-model='timeSPrice'>
                                <radio :value='1'>支持</radio>
                                <radio :value='0'>不支持</radio>
                            </radio-group>
                        </div>
            </div>
            </div>
        </modal>
        
        <modal 
            title='配置支持的借款金额'
            :show='show_modal_cycle_price' 
            :loading='loading_save_cycles_price' 
            confirm-text='保存'
            @close='closeEditCyclesPrice'
            @confirm='saveCyclePrice'>
            <div class="modal-form-wrap">
                <ul class='modal-form' v-if='cyclesPrice.length'>
                    <li class='form-item' v-for='item in cyclesPrice'>
                        <span class="form-item__key">{{item.amount/100}}.00元</span>
                        <div class="form-item__value" >
                            <radio-group v-model='item.status'>
                                <radio :value='1'>支持</radio>
                                <radio :value='0'>不支持</radio>
                            </radio-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>
       

       

        <confirm
            title='确认删除此条利息及额度方案'
            :show='show_confirm_delete_limit'
            :loading='loading_delete_limits'
            @close='show_confirm_delete_limit = false'
            @confirm='deleteLimit'></confirm>
    </div>
</template>

<script>    
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import datePicker from '../components/DatePicker.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import checkBox from '../components/CheckBox.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            radioGroup,
            radio,
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            checkBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                show_modal_cycle:false,
                show_modal_model:false,
                show_modal_limit:false,
                show_modal_extend:false,
                show_modal_overdue:false,
                show_confirm_delete_limit:false,
                models:[],
                modelsSet:[],
                cycles:[],
                cyclesSet:[],
                limits:[],
                extendTime:'',
                extendTimeSet:'',
                overdue:'',
                overdueSet:'',
                curLimit:{},
                placeholder:'--',
                loading_model:false,
                loading_limits:false,
                loading_extend:false,
                loading_model:false,
                loading_overdue:false,
                loading_save_model:false,
                loading_save_cycles:false,
                loading_save_limits:false,
                loading_delete_limits:false,
                loading_save_extend:false,
                loading_save_overdue:false,
                show_modal_add:false,
                loading_save_add:false,
                input:"",
                timeS:1,
                loading_cyclesPrice:false,
                cyclesPrice:[],
                show_modal_add_price:false,
                loading_save_add_price:false,
                inputPrice:"",
                timeSPrice:1,
                show_modal_cycle_price:false,
                loading_save_cycles_price:false,
                cyclesSetPrice:[],
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            addCyclesPrice(){
                this.show_modal_add_price=true
            },
            addCycles(){
                this.show_modal_add=true;
            },
            closeEditModelsadd(){
                this.show_modal_add=false;
                this.input=""
                this.timeS=1
            },
            saveModeladd(){
                let msg = {
                    days:this.input,
                    status:this.timeS
                }
                systemApi.saveCycles(msg)
                .then(result=>{
                    this.show_modal_add=false;
                    this.getCycles()
                    this.input=""
                    this.timeS=1
                })
                .catch(error => {
                    this.show_modal_add=false;
                })
            },
            closeEditModelsaddPrice(){
                this.show_modal_add_price=false
                this.inputPrice=''
                this.timeSPrice=1
            },
            saveModeladdPrice(){
                let msg = {
                    amount:this.inputPrice,
                    status:this.timeSPrice
                }
                this.loading_cyclesPrice=true
                systemApi.systemSaveSupportAmount(msg)
                .then(result=>{
                    this.systemSupportAmountListFn()
                    this.loading_cyclesPrice=false
                    this.show_modal_add_price=false
                    this.inputPrice=''
                    this.timeSPrice=1
                })
                .catch(error => {
                    console.error(error)
                    this.loading_cyclesPrice=false
                    this.show_modal_add_price=false
                })
            },
            closeEditCyclesPrice(){
                this.show_modal_cycle_price=false
            },
            //sss
            saveCyclePrice(){
                console.log(this.cyclesPrice)
                this.loading_save_cycles_price=true
                 systemApi.systemUpdateSupportAmount({
                    data:JSON.stringify(this.cyclesPrice)
                })
                .then(result=>{
                    //this.systemSupportAmountListFn()
                    this.loading_save_cycles_price=false
                    this.show_modal_cycle_price=false
                })
                .catch(error => {
                    console.error(error)
                    this.show_modal_cycle_price=false
                    this.loading_save_cycles_price=false
                })
            },
            showEditModels(){
                this.show_modal_model = true
                this.modelsSet = _.cloneDeep(this.models)
            },
            showEditCycles(){
                this.show_modal_cycle = true
                this.cyclesSet = _.cloneDeep(this.cycles)
            },
            closeEditModels(){
                this.show_modal_model = false
                this.models = _.cloneDeep(this.modelsSet)
            },
            closeEditCycles(){
                this.show_modal_cycle = false
                this.cycles = _.cloneDeep(this.cyclesSet)
            },
            showEditCyclesPrice(){
                this.show_modal_cycle_price=true
                this.cyclesSetPrice = _.cloneDeep(this.cyclesPrice)
            },
            saveModel(){
                this.loading_save_model = true
                systemApi.saveModels({
                    data:JSON.stringify(this.models)
                })
                .then(result=>{
                    this.loading_save_model = false
                    this.show_modal_model = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_model = false
                })
            },
            saveCycle(){
                this.loading_save_cycles = true
                systemApi.systemUpdateSupportCycle({
                    data:JSON.stringify(this.cycles)
                })
                .then(result=>{
                    this.loading_save_cycles = false
                    this.show_modal_cycle = false
                    //this.getCycles()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_cycles = false
                })
            },
            showEditLimit(item){
                this.curLimit = item
                this.curLimit.amoutToYuan = toYuan(item.amount,'int')
                this.curLimit.device = {}
                this.curLimit.cycles = {}
                this.curLimit.device.value = item.deviceId
                this.curLimit.device.text = item.deviceModel
                this.curLimit.cycles.value = item.cycleId
                this.curLimit.cycles.text = item.cycleDays + '天'
                this.curLimit.serviceChargePercent = (item.serviceCharge / 10).toFixed()
                this.show_modal_limit = true
            },
            showAddLimit(){
                this.curLimit.amoutToYuan = ''
                this.curLimit.device = {}
                this.curLimit.cycles = {}
                this.curLimit.device.value = ''
                this.curLimit.device.text = '请选择设备'
                this.curLimit.cycles.value = ''
                this.curLimit.cycles.text = '请选择周期'
                this.curLimit.serviceChargePercent = ''
                this.show_modal_limit = true
            },
            showDeleteLimit(item){
                this.curLimit = item
                this.show_confirm_delete_limit = true
            },
            saveLimit(){
                if(this.curLimit.cycles.value === ''){
                    this.setMsgTip({
                        text:'请选择周期',
                        type:'warn'
                    })
                    return
                }
                if(this.curLimit.device.value === ''){
                    this.setMsgTip({
                        text:'请选择设备',
                        type:'warn'
                    })
                    return
                }
                if(this.curLimit.amoutToYuan === ''){
                    this.setMsgTip({
                        text:'请输入可借额度',
                        type:'warn'
                    })
                    return
                }
                if(this.curLimit.serviceCharge === ''){
                    this.setMsgTip({
                        text:'请输入服务费比例',
                        type:'warn'
                    })
                    return
                }
                this.loading_save_limits = true
                systemApi.saveDeviceCycle({
                    deviceId:this.curLimit.device.value,
                    cycleId:this.curLimit.cycles.value,
                    amount:(this.curLimit.amoutToYuan * 100).toFixed(),
                    serviceCharge:(this.curLimit.serviceChargePercent * 10).toFixed(),
                })
                .then(result=>{
                    this.show_modal_limit = false
                    this.loading_save_limits = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_limits = false
                })
            },
            saveExtend(){
                this.loading_save_extend = true
                systemApi.saveExtendTimes(this.extendTimeSet)
                .then(result=>{
                    this.show_modal_extend = false
                    this.loading_save_extend = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_extend = false
                })
            },
            saveOverdue(){
                this.loading_save_overdue = true
                systemApi.saveOverdueCharge({
                    overdueCharge:this.overdueSet === '' ? '' : (this.overdueSet * 10).toFixed(0),
                })
                .then(result=>{
                    this.show_modal_overdue = false
                    this.loading_save_overdue = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_overdue = false
                })
            },
            deleteLimit(){
                this.loading_delete_limits = true
                systemApi.delDeviceCycle({
                    id:this.curLimit.id,
                })
                .then(result=>{
                    this.show_confirm_delete_limit = false
                    this.loading_delete_limits = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_delete_limits = false
                })
            },


            getCycles(){
                this.loading_cycles = true
                systemApi.allCycles()
                .then(result=>{
                    console.log(result)
                    this.cycles = result
                    this.cyclesSet = _.clone(result)
                    this.loading_cycles = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_cycles = false
                })
            },
            systemSupportAmountListFn(){
                this.loading_cyclesPrice=true
                systemApi.systemSupportAmountList()
                .then(result=>{
                    console.log(result)
                    this.cyclesPrice=result
                    this.loading_cyclesPrice=false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_cyclesPrice=false
                })
            },
        },
        created(){
            this.getCycles()
            this.systemSupportAmountListFn()
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #system-user{

    }
    .posi{
        position:absolute;
        right:220px;
    }
    body .sub-title .title{
        padding:16px 0;
    }
    body .sub-title{
        color:#333;
        font-size:16px;
        padding:0 20px;
    }
    .button{
        font-size:16px;
    }
     body .result-info__key{
        color:#333;
    }
    .item{
    width:90%;
    margin:0 auto;
    span{
        float: left;
        height:40px;
        line-height: 40px;
        margin-right:20px;
    }
    .el-input{
        width:300px;
    }
   }
       .item .mar{
        margin-right:51px;
    }
</style>
